<template>
<AdminHeader></AdminHeader>
  <div class="container">
    <div class="row aboutme">
      <div class="col">
        <div class="box">
          <div class="box-title"><img src="@/assets/icon/aboutme.png" class="icon"/> 关于作者</div>
          <div class="box-content">
            <img src="@/assets/avatar.jpg" class="dev_avatar"/>
            <p>昵称：{{ authorInfo.developer_name }}</p>
            <p>QQ：{{ authorInfo.QQ }}</p>
            <p>微信：{{ authorInfo.Weixin }}</p>
            <p>Email：{{ authorInfo.email }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div class="box">
          <div class="box-title"><img src="@/assets/icon/time.png" class="icon"/> 当前时间</div>
          <div class="box-content">{{ currentTime }}</div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-4">
        <div class="box">
          <div class="box-title"><img src="@/assets/icon/novel.png" class="icon"/> 书籍数量</div>
          <div class="box-content">{{ novelCount.novel_num }} 本</div>
        </div>
      </div>
      <div class="col-4">
        <div class="box">
          <div class="box-title"><img src="@/assets/icon/chapter.png" class="icon"/> 章节数量</div>
          <div class="box-content">{{ novelCount.chapter_num }} 章</div>
        </div>
      </div>
      <div class="col-4">
        <div class="box">
          <div class="box-title"><img src="@/assets/icon/user.png" class="icon"/> 用户数量</div>
          <div class="box-content">{{ novelCount.user_num }} 人</div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div class="box">
          <div class="box-title"><img src="@/assets/icon/system.png" class="icon"/> 系统信息</div>
          <div class="box-content">
            <p>系统名称：{{ authorInfo.system_name }}</p>
            <p>系统版本：{{ authorInfo.system_ver }}</p>
            <p>系统介绍：完全从 0 ~ 1 开发本套独立系统。</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>


<script setup>
import AdminHeader from '@/components/AdminHeader.vue';
import {ref, onMounted, defineComponent} from 'vue';
import axios from "axios";
import {ElNotification} from "element-plus";
import router from "@/router/index.js";
import VueCookies from "vue-cookies";
import config from "../../../config/config.js";
// Box 组件
const Box = defineComponent({
  props: {
    title: String,
    content: [String, Number, Object],
  },
  setup(props) {
    return {
      title: props.title,
      content: props.content,
    };
  },
});

// 数据和方法
const currentTime = ref('');
const novelCount = ref(0);
const authorInfo = ref('');

// 定时器更新当前时间
const updateCurrentTime = () => {
  VueCookies.set('activeIndex', 1);
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  const formattedDate = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;

  currentTime.value = formattedDate;
};

const getSystemInfo = async () => {
  const adminToken = VueCookies.get('adminToken');
  try {
    const response = await axios.get(`${config.apiUrl}/admin/system-info`, {
      headers: {
        'Authorization': `Bearer ${adminToken}` // 使用 Cookie 中的 Token
      },
    });

    const data = response.data;
    authorInfo.value = data.developer_info;
    novelCount.value = data.system_info;
  } catch (error) {
    ElNotification({
      message: '获取系统信息失败！',
      type: 'error',
      duration: 1000
    });
  }
}

// 模拟数据更新
onMounted(() => {
  // 初始化当前时间
  updateCurrentTime();
  getSystemInfo();
  // 每秒更新一次当前时间
  setInterval(updateCurrentTime, 1000);
});
</script>

<style scoped>
.icon{
  width: 22px;
}
.box {
  margin: 10px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.05); /* 添加阴影 */
}

.box-title {
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 3px;
  font-size: 20px;
}

.box-content {
  padding: 10px;
  font-size: 15px;
}
.dev_avatar{
  width: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}
.aboutme{
  text-align: center;

}
</style>